<template>
  <div id="user-box">
    <div class="avatar-box">
      <el-avatar v-show="hasLogin" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
    </div>
    <div class="text-box" v-if="hasLogin">
      欢迎:
      <el-dropdown>
        <span class="clickable">
          {{ userInfo }}
          <el-icon style="margin-left: 7px; color: gray"><ArrowDown></ArrowDown></el-icon>
        </span>

        <template #dropdown>
          <el-dropdown-menu>
            <!-- <el-dropdown-item :icon="Plus">Action 1</el-dropdown-item> -->
            <el-dropdown-item :icon="Upload" style="color: black;" @click="logoutHandle()">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
    <div v-else class="clickable" @click="redirectToLoginPage()">{{ userInfo }}</div>
  </div>
</template>

<script lang="ts" setup>
import { computed } from "vue"
import { useLoginStore } from "@/store/loginStore"
import { ArrowDown, Upload } from "@element-plus/icons-vue"
import { useRouter } from "vue-router";

const router = useRouter()

const loginStore = useLoginStore()

const hasLogin = computed((): boolean => loginStore.isAuthenticated())

const userInfo = computed((): string => (hasLogin.value ? <string>loginStore.$state.user : "您还未登录，点击登录"))

function logoutHandle() {
    redirectToLoginPage()
    loginStore.removeToken()
}

function redirectToLoginPage() {
    router.push({name:"login"})
}
</script>

<style lang="scss" scoped>
#user-box {
  float: right;
  display: flex;
  height: inherit;
  margin-right: 50px;
  user-select: none;
  .avatar-box {
    height: inherit;
    display: flex;
    align-items: center;
  }
  .text-box {
    height: inherit;
    :deep(.el-dropdown) {
      height: 100%;
      :deep(span) {
        vertical-align: middle;
      }
    }
  }
  .clickable {
    padding: 10px;
    font-size: large;
    color: whitesmoke;
    display: flex;
    align-items: center;
    cursor: pointer;
    text-decoration: underline;
  }
  
  // 去除下拉菜单轮廓
  :deep(.el-tooltip__trigger:focus-visible) {
      outline: unset;
    }
}
</style>
